<template>
  <div class="center my-4 font-bold text-16px color-[#333]">
    <div class="mr-1">{{ formatDate(model.date) }}</div>
    执行度：
    <wd-count-to
      v-if="compNumber"
      :endVal="compNumber"
      suffix="%"
      type="primary"
    />
    <template v-else>{{ isNaN(compNumber) ? '请假' : '暂未打卡' }}</template>
  </div>

  <wd-form ref="form" custom-class="p-2" :model="model" errorType="toast">
    <wd-cell-group border>
      <wd-calendar
        v-model="model.date"
        label="打卡日期"
        label-width="100px"
        placeholder="请选择日期"
        prop="date"
        :min-date="start"
        :max-date="end"
        :shortcuts="shortcuts"
        :on-shortcuts-click="onShortcutsClick"
        :show-confirm="false"
        :rules="[{ required: true, message: '请选择日期' }]"
        @change="handleCalendarChange"
      />
      <wd-input
        v-model="model.value"
        label="执行度(%)"
        label-width="100px"
        prop="value"
        type="number"
        :focus="true"
        placeholder="请输入执行度0-100"
        :rules="[{ required: true, message: '请填写执行度' }]"
      />
      <wd-radio-group
        v-model="number"
        cell
        shape="button"
        @change="handleRadioChange"
      >
        <wd-radio
          v-for="radio in radioList"
          :key="radio.value"
          :value="radio.value"
        >
          {{ radio.label }}
        </wd-radio>
      </wd-radio-group>
    </wd-cell-group>
    <view class="footer mt-4">
      <wd-button
        type="primary"
        size="large"
        :loading="loading"
        block
        @click="handleSubmit"
      >
        提交
      </wd-button>
    </view>
  </wd-form>
  <div class="center mt-4">
    <wd-button type="text" @click="jump('/pages/dailyCheck/log/index')">
      查看本周浇水
    </wd-button>
  </div>
  <wd-toast />
  <wd-message-box />
</template>

<script setup lang="ts">
import { checkIn, getDailyDataByDate } from '@/api/daily';
import { ResultCodeEnum } from '@/enums';
import { jump } from '@/utils/common';
import {
  addDate,
  formatDate,
  getStartOrEndTimeStamp,
  today
} from '@/utils/date';
import { Dayjs } from 'dayjs';
import { useMessage, useToast } from 'wot-design-uni';
import { CalendarOnShortcutsClickOption } from 'wot-design-uni/components/wd-calendar/types';
import { MessageResult } from 'wot-design-uni/components/wd-message-box/types';

onShareAppMessage(() => ({
  title: '快来浇水吧！',
  path: '/pages/dailyCheck/index'
}));

const radioList = [
  { label: '20%', value: 20 },
  { label: '40%', value: 40 },
  { label: '60%', value: 60 },
  { label: '80%', value: 80 },
  { label: '100%', value: 100 },
  { label: '请假', value: 0 }
];

const number = ref();
type TModel = {
  date: number;
  value: string;
};
const model = reactive<TModel>({
  date: Date.now(),
  value: ''
});

const { start, end } = getStartOrEndTimeStamp('week');

const compNumber = ref();
const getDailyData = async (date: string | Dayjs) => {
  const res = await getDailyDataByDate(formatDate(date));
  if (res.code === ResultCodeEnum.SUCCESS) {
    compNumber.value = res.data * 100;
    console.log('打印***compNumber.value', compNumber.value);
  }
};

const shortcuts = ref<Record<string, any>[]>([
  {
    text: '昨天',
    id: -1
  },
  {
    text: '今天',
    id: 0
  },
  {
    text: '明天',
    id: 1
  }
]);
const handleCalendarChange = (e: { value: string }) => {
  getDailyData(e.value);
};
const onShortcutsClick = ({ item }: CalendarOnShortcutsClickOption) => {
  const dayDiff = item.id;
  const date = addDate(today, dayDiff, 'day');
  getDailyData(date);
  return date.valueOf();
};

const handleRadioChange = (e: any) => {
  model.value = e.value;
};

const form = ref();
const message = useMessage();
const { success } = useToast();

const loading = ref(false);
const handleSubmit = async () => {
  const { valid } = await form.value.validate();
  if (!valid) return;
  let messageRes: MessageResult | void = undefined;
  if (compNumber.value) {
    messageRes = await message
      .confirm({
        msg: '该日期已完成浇水，确认修改吗？',
        title: '确认修改'
      })
      .catch(() => {});
  }

  if (!compNumber.value || (messageRes && messageRes.action === 'confirm')) {
    loading.value = true;
    const res = await checkIn({
      date: formatDate(model.date),
      value: Number(model.value) / 100
    });
    if (res.code === ResultCodeEnum.SUCCESS) {
      success({
        msg: '浇水成功'
      });
      getDailyData(formatDate(model.date));
    }
    loading.value = false;
  }
};

onMounted(() => {
  getDailyData(today);
});
</script>

<style lang="scss" scoped></style>
